<template>
	<!-- 用户详情 -->
	<div id="userDetails">
		<van-nav-bar
			title="用户个人中心"
			left-arrow
			@click-left="$router.go(-1)"
		/>
		<van-cell title="用户名" is-link :value="userMap.loginUstr"/>
		<van-cell title="昵称" @click="window.updateUname=true" is-link :value="userMap.uname"/>
		<van-cell title="手机号" @click="window.updatePhone=true" is-link :value="userMap.phone"/>
		<van-cell title="个性签名" @click="window.updateGxqm=true" is-link :value="userMap.gxqm"/>
		<van-cell title="紫星币数量" @click="window.updateZxb=true" is-link :value="userMap.zxbnum"/>
		<div class="logout" @click="logout">退出登录</div>
		<!-- 弹窗区域 -->
		<van-dialog
			v-model="window.updateUname" 
			title="修改昵称" 
			@confirm="updateUname"
		>	
			<div class="windowBox">
				<input type="text" v-model="updateForm.uname">
			</div>
		</van-dialog>
		<!-- 修改手机号弹窗 -->
		<van-dialog
			v-model="window.updatePhone" 
			title="修改手机号" 
			@confirm="updatePhone"
		>	
			<div class="windowBox">
				<input type="text" maxlength="11" v-model="updateForm.phone">
			</div>
		</van-dialog>
		<!-- 修改个性签名 -->
		<van-dialog
			v-model="window.updateGxqm" 
			title="修改个性签名" 
			@confirm="updateGxqm"
		>	
			<div class="windowBox">
				<input type="text" v-model="updateForm.gxqm">
			</div>
		</van-dialog>
		<!-- 修改紫星币数量 -->
		<van-dialog
			v-model="window.updateZxb"
			title="修改紫星币数量"
			confirmButtonColor="#25987D"
			@confirm="updateZxbnum"
		>
			<div class="windowBox">
				<input type="text" v-model="updateForm.zxbnum">
			</div>
		</van-dialog>
	</div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
	export default {
		data() {
			return {
				updateForm:{
					uname:"",
					phone:"",
					gxqm:"",
					zxbnum:""
				}, 
				window:{ //弹窗
					updateUname:false,
					updatePhone:false,
					updateGxqm:false,
					updateZxb:false
				}
			}
		},
		methods:{
			logout(){
				this.$dialog.alert({
					message:"成功退出登录",
					confirmButtonText:"回到首页",
					confirmButtonColor:"#25987D"
				}).then(()=>{
					this.Logout()
					this.$router.push("/home/index")
				})	
			},
			// 修改昵称
			async updateUname(){
				if(!this.updateForm.uname) {
					this.$dialog.alert({
						message:"昵称不能为空",
						confirmButtonText:"确定",
						confirmButtonColor:"#25987D"
					})
					return
				}
				const result=await this.UpdateSkinName(this.updateForm.uname)
				if(result){
					this.$dialog.alert({
						message:"修改成功",
						confirmButtonText:"确定",
						confirmButtonColor:"#25987D"
					})
					this.updateForm.uname=""
					await this.LoaduserInfo()
				}
			},
			// 修改手机号
			async updatePhone(){
				if(!this.updateForm.phone){
					this.alertWindow("手机号不能为空值")
					return
				}
				const result=await this.UPDATEphone(this.updateForm.phone)
				if(result){
					this.alertWindow("修改成功")
					this.updateForm.phone=""
					await this.LoaduserInfo() //重新加载用户信息
				}
			},
			// 弹窗封装
			alertWindow(message,confirmButtonText="确定",confirmButtonColor="#25987D"){
				this.$dialog.alert({
					message:message,
					confirmButtonText:confirmButtonText,
					confirmButtonColor:confirmButtonColor
				})
			},
			// 修改个性签名
			async updateGxqm(){
				const result=this.UPDATEgxqm(this.updateForm.gxqm)
				if(result){
					this.alertWindow("修改成功")
					this.updateForm.gxqm=""
					await this.LoaduserInfo()
				}
			},
			// 修改紫星币数量
			async updateZxbnum(){
				if(this.updateForm.zxbnum=='') {
					this.alertWindow("紫星币数量不能为空")
				}
				// 紫星币数量只能是数字
				if(!/^[0-9]*$/.test(this.updateForm.zxbnum)){
					this.alertWindow("紫星币数量只能是数字")
				}
				// 异步请求
				const resBool=await this.$store.dispatch("updateZxbNum",{zxbnum:this.updateForm.zxbnum})
				if(resBool){
					this.alertWindow("修改成功")
					this.LoaduserInfo() //重新加载用户信息
				}
			},
			...mapActions(["Logout","UpdateSkinName","UPDATEphone","UPDATEgxqm","LoaduserInfo"])
		},
		mounted(){
			
		},
		computed:{
			...mapState(["userMap","token"])
		}
	}
</script>

<style lang="scss" scoped>
@import "../../scss/GLOBAL.scss";
#userDetails {
	user-select: none;
	::v-deep {
		.van-nav-bar {
			background-color: $themeColor;
			.van-nav-bar__title {
				color: #fff;
			}
			.van-icon-arrow-left {
				color: #fff;
			}
	}
	.van-cell {
		.van-cell__title:first-child {
			flex: 0;
			flex-basis: 10em;
		}
		.van-cell__value:nth-child(2){
			flex: 1;
		}
	}
		.logout {
			background-color: $themeColor;
			color: #fff;
			border-radius: 50px;
			text-align: center;
			width: 30%;
			font-size: 1em;
			padding: 8px 0;
			position: fixed;
			bottom: 2.5em;
			left: calc(50% - 3.52em);
		}
	}
	.windowBox {
		text-align: center;
		padding: 1em 0;
		input {
			padding: .6em 1em ;
			border-radius: 6px;
			font-size: .9em;
		}
	}
}
</style>